import React, { Component } from 'react'

import styles from '../style/index.less';

export default class Tab extends Component {

  // Tip框数据
  tipConfig = [
    { key: 'waterSupply', value: '供水量', formatter: 'm³' },
    { key: 'salesVolume', value: '售水量', formatter: 'm³' },
    { key: 'differenceSales', value: '产销差', formatter: 'm³' },
    { key: 'leakageRate', value: '漏损率', formatter: '%' },
    { key: 'reportedQuantity', value: '报装数量', formatter: '' },
    { key: 'waterCharge', value: '实收水费', formatter: '￥' }
  ]

  // 生成tip数据展示栏
  getTip = (key, title, formatter) => {
    const { annualData } = this.props;
    const targetData = annualData && annualData.filter(item => item.name === key)[0];
    return (
      <div className={styles.cardMainHeader_Tip} key={key}>
        <div className={styles.cardMainHeader_title}>{title}</div>
        <div className={styles.cardMainHeader_msg}>
          <p>本月累计：<span className={styles.msg_Num}>{targetData && `${targetData.month}${formatter}`}</span></p>
          <p>本年累计：<span className={styles.msg_Num}>{targetData && `${targetData.year}${formatter}`}</span></p>
        </div>
      </div>
    )
  }

  render() {
    return (
      <div className={styles.cardMainHeader}>
        {this.tipConfig.map(item => {
          return this.getTip(item.key, item.value, item.formatter);
        })}
      </div>
    )
  }
}
